<script setup lang="ts">
import type { LoginUserInfo } from '@/apis/common/loginApi'
import { onMounted, ref } from 'vue'

import { useRoute, useRouter } from 'vue-router'
import { loginApi } from '@/apis/common/loginApi'
import { useLoginStore } from '@/stores/loginStore'
import PwdLoginForm from './components/PwdLoginForm.vue'
import SmsLoginForm from './components/SmsLoginForm.vue'

const registerEnable = ref(false)
const settingsMap = ref<Record<string, Record<string, string>>>({})
const loginType = ref<string>()

async function loadLoginSetting() {
  const redirectUri = `${location.origin}/#/codeCallback?type=login`
  const data = await loginApi.queryLoginSettings(redirectUri)
  registerEnable.value = data.registerEnable

  settingsMap.value = data.loginTypeParams
  const keys = Object.keys(data.loginTypeParams)
  loginType.value = keys.length > 0 ? keys[0] : undefined
}

onMounted(loadLoginSetting)

const router = useRouter()
const route = useRoute()
const loginStore = useLoginStore()
function loginSuccess(data: LoginUserInfo) {
  loginStore.login(data)
  ElMessage.success('登录成功')
  if (route.query.redirect) {
    router.push(route.query.redirect as string)
  }
  else {
    router.push('/')
  }
}

async function codeLogin(code: string, type: string) {
  const data = await loginApi.login({
    loginType: type,
    authCode: code,
  })
  loginSuccess(data)
}

const bindTypes = ref([
  { name: 'GITEE', src: 'https://gitee.com/favicon.ico' },
  { name: 'DINGTALK', src: 'https://img.alicdn.com/imgextra/i4/O1CN01RtfAks1Xa6qJFAekm_!!6000000002939-2-tps-128-128.png' },
  { name: 'WECOM', src: 'https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico' },
  { name: 'WECHAT', src: 'https://gitee.com/favicon.ico' },
])

function onSelect(type: string) {
  if (settingsMap.value[type].authorizeUrl) {
    location.href = settingsMap.value[type].authorizeUrl
  }
  else {
    loginType.value = type
  }
}
</script>

<template>
  <div class="h-full flex flex-row items-center justify-center">
    <div class="flex rd-xl">
      <div class="w-96 flex flex-col p-5">
        <div class="mb-5 flex flex-row items-center justify-between">
          <div class="text-2xl font-semibold">
            欢迎登录
          </div>
          <el-button v-if="registerEnable" link type="primary">
            注册新账号
          </el-button>
        </div>

        <div v-if="loginType === 'PWD' || loginType === 'SMS'">
          <el-tabs v-model="loginType">
            <el-tab-pane v-if="settingsMap.PWD" label="密码登录" name="PWD">
              <PwdLoginForm @success="loginSuccess" />
            </el-tab-pane>
            <el-tab-pane v-if="settingsMap.SMS" label="短信登录" name="SMS">
              <SmsLoginForm @success="loginSuccess" />
            </el-tab-pane>
          </el-tabs>

          <el-divider v-if="settingsMap.GITEE || settingsMap.DINGTALK || settingsMap.WECOM || settingsMap.WECHAT" border-style="dashed">
            使用三方登录
          </el-divider>

          <div class="flex flex-row items-center justify-around text-2xl">
            <template v-for="type in bindTypes" :key="type.name">
              <img v-if="settingsMap[type.name]" :src="type.src" class="h-6 w-6 cursor-pointer" @click="onSelect(type.name)">
            </template>
          </div>
        </div>

        <div v-if="loginType === 'DINGTALK' && settingsMap.DINGTALK">
          <DingtalkCode :params="settingsMap.DINGTALK" @callback="(code) => codeLogin(code, 'DINGTALK')" />
          <el-button class="w-full" size="large" @click="loginType = 'PWD'">
            返回
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
